<%--可以直接写<%basePath%>或者${pageContext.request.contextPath}，获取的是localhost:8888/forum--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看看车吧</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/car.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<div id="car">
    <template>
        <div class="car">
            <div id="main" style="line-height:20px;height: 20px;cursor: pointer;margin-top: 20px">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item onclick="main()">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>看看车吧</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-container>
                <el-container>
                    <el-aside width="200px">
                        <div style="border:1px solid #e6e6e6;height: 300px;margin-top: 20px">
                            <span class="title" onclick="getSeries()">全部分类</span>
                            <div>
                                <ul id="carInfoUl"></ul>
                            </div>
                        </div>
                    </el-aside>
                    <el-main></el-main>
                </el-container>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-size="pageSize"
                            layout="prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
                <el-footer style="text-align: center"> Copyright © 2016-2017, snncar.com,All Rights Reserved 皖ICP备16022456号-1</el-footer>
            </el-container>
        </div>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                total: 1,//总条数  默认值不能为空
                pageSize: 16,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                sites:[]
            }
        },
        created() {
            this.getPage()
        },
        methods: {
            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getPage();
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getPage();
            },
            getPage(){
                var that = this;
                $.ajax({
                    type: 'get',
                    url: '/forum/car/CarManage',
                    dataType: 'json',
                    data: "pageNum=" + that.pageNum + "&pageSize=" + that.pageSize,
                    success: function (data) {
                        // console.log(data);
                        if (data.state === '200') {
                            that.sites = data.data.list;
                            that.pageNum = data.data.pageNum;//当前页码
                            that.total = data.data.total;//总条数
                            that.pages = data.data.pages;//总页数
                            showSeries(that.sites);
                        }
                    }
                })
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#car");

    var total = 1;//总条数  默认值不能为空
    var pageSize = 16;//每页显示几条数据
    var pageNum = 1;//当前页
    var pages = 1;//总页数

    //<div class="img" v-for="item in sites" :key="item.carId">
    // <img :src=" '../images/'+ item.carImg">
    //     <span class="series">{{item.seriesName}}</span>
    // </div>
    function showSeries(jsonObj) {
        <%--var html = '';--%>
        <%--for (var i = 0; i < jsonObj.length; i++) {--%>
        <%--html += "<div class='img'>";--%>
        <%--&lt;%&ndash;${pageContext.request.contextPath}获取的是项目名localhost:8888/forum&ndash;%&gt;--%>
        <%--html += "<img src='${pageContext.request.contextPath}/cln/images/" + jsonObj[i].carImg +"'>";--%>
        <%--html += "<span class='series'>";--%>
        <%--html += jsonObj[i].seriesName;--%>
        <%--html += "</span></div>";--%>
        <%--}--%>
        <%--$('main').html(html)--%>
        $('main').empty();//清空
        $.each(jsonObj, function (i, result) {
            var item = "<div class='img' onclick=" + "getCarId('" + result['carId'] + "')>" +
                "<img src='http://q9y68y4j5.bkt.clouddn.com/" + result['carImg'] + "'>" +
                "<span class='series'>" + result['seriesName'] + "</span></div>";
            $('main').append(item);//追加数据
        })
    }

    // 获取品牌
    function getBrand() {
        var _this = this;
        $.ajax({
            type: 'get',
            url: '/forum/brand/selectAllBrand',
            dataType: 'json',
            success: function (data) {
                // console.log(data);
                if (data.state === '200') {
                    _this.options = data.data;
                    console.log(_this.options);
                    showBrand(_this.options);
                }
            }
        })
    }

    // 获取车型
    function getSeries() {
        var _this = this;
        $.ajax({
            type: 'get',
            url: '/forum/car/CarManage',
            dataType: 'json',
            data: "pageNum=" + _this.pageNum + "&pageSize=" + _this.pageSize,
            success: function (data) {
                // console.log(data);
                if (data.state === '200') {
                    sites = data.data.list;
                    pageNum = data.data.pageNum;//当前页码
                    total = data.data.total;//总条数
                    pages = data.data.pages;//总页数
                    console.log(sites);
                    console.log(pageNum);
                    console.log(total);
                    console.log(pages);
                    $('main').empty();//清空
                    showSeries(sites);
                }
            }
        })
    }

    function showBrand(jsonObj) {
        // var html = '';
        // for (var i = 0; i < jsonObj.length; i++) {
        //     html += "<li onclick='getBrandId()'>";
        //     html += jsonObj[i].brandName;
        //     html += "</li>"
        // }
        // $('ul').html(html)
        $.each(jsonObj, function (i, result) {
            var item = "<li onclick=" + "getBrandCar('" + result['brandName'] + "')>" + result['brandName'] + "</li>";
            $('#carInfoUl').append(item);//追加数据
        });
        getSeries();
    }

    //根据品牌查询车系
    function getBrandCar(brand) {
        console.log(brand);
        $.ajax({
            type: 'post',
            url: '/forum/brand/selectBrandByBrandName',
            dataType: 'json',
            data: {brandName: brand},
            success: function (data) {
                console.log(data);
                var res = data.data;
                $('main').empty();//清空
                if (data.state === '200') {
                    $.each(res, function (i, result) {
                        var item = "<div class='img' onclick=" + "getCarId('" + result['carId'] + "')>" +
                            "<img src='http://q9y68y4j5.bkt.clouddn.com/" + result['carImg'] + "'>" +
                            "<span class='series'>" + result['seriesName'] + "</span></div>";
                        $('main').append(item);
                    })
                }
            }
        })
    }

    function getCarId(carId) {
        sessionStorage.setItem("carId", carId);//sessionStorage本地存储数据
        // console.log(carId)
        window.location.href = "carbase.jsp"
    }

    function main(){
        window.location.href = "../../3_main/3_main.html";
    }

    getBrand();
</script>
</html>